<template>
    <el-table :data="orderData" style="width: 100%">
        <el-table-column fixed prop="oid" label="订单ID" width="80" />
        <el-table-column prop="uid" label="用户ID" width="100" />
        <el-table-column prop="total" label="订单金额" width="100" />
        <el-table-column prop="remark" label="备注" width="250" />
        <el-table-column prop="name" label="收货人姓名" width="100" />
        <el-table-column prop="phone" label="收货电话" width="120" />
        <el-table-column prop="address" label="收货地址" width="200" />
        <el-table-column prop="createTime" label="下单时间" width="200" />
        <el-table-column prop="updateTime" label="最后一次更新时间" width="200" />
        <el-table-column fixed="right" label="完成情况" width="100">
            <template #default="scope">
                <el-tag v-if="scope.row.completionStatus === 1" type="success">已付款</el-tag>
                <el-tag v-else-if="scope.row.completionStatus === 2">已完成</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button plain type="primary" size="small" @click="completeOrder(scope.row)">完成</el-button>
                <el-button plain type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

axios.defaults.baseURL = '/api'

export default {
    data() {
        return {
            orderData: [
                {
                    "oid": 1,
                    "uid": 2,
                    "total": 159.8,
                    "remark": "巴拉巴拉巴拉巴拉",
                    "name": "张三",
                    "phone": "12344445555",
                    "address": "长沙望城湖南信息职院南院",
                    "createTime": "2023-12-26T18:12:31",
                    "updateTime": "2023-12-26T18:12:31",
                    "status": 1
                },
            ],
        }
    },
    created() {
        this.getOrderData()
    },
    methods: {
        getOrderData() {
            axios.get('/order')
                .then(result => {
                    if (result.data.code === 1) {
                        this.orderData = result.data.data;
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        validOrderStatus(order, func) {
            if (order.completionStatus === 2) {
                func();
            } else {
                ElMessageBox.confirm(
                    '该订单尚未完成，确定删除？？？',
                    '警告',
                    {
                        confirmButtonText: '继续操作',
                        cancelButtonText: '取消操作',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        func();
                    })
                    .catch(() => {
                        ElMessage.info("已取消删除");
                    })
            }
        },
        deleteOrder(order) {
            this.validOrderStatus(order, () => {
                let arr = [];
                arr.push(order.oid);
                axios.delete('/order/' + arr)
                    .then(result => {
                        if (result.data.code === 1) {
                            ElMessage.success("删除成功");
                            this.getOrderData();
                        } else {
                            ElMessage.error("删除失败")
                            console.log(result.data);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        if (err.response.status === 500) {
                            ElMessage.info("后端服务器出现异常");
                            return;
                        }
                        ElMessage.error("删除失败！！！");
                    })
            })
        },
        completeOrder(order) {
            let arr = [];
            arr.push(order.oid);
            axios.put('/order/' + arr)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("状态更新成功");
                        this.getOrderData();
                    } else {
                        ElMessage.error("状态更新失败")
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                        return;
                    }
                    ElMessage.error("状态更新失败！！！");
                })
        }
    }
}
</script>